<template>
<div>
  <!--    搜索框-->
  <el-card class="box-card">
    <el-form :inline="true" :model="keyword" ref="searchForm" class="box-child">
      <el-form-item label="分类" prop="labourUnit">
        <el-input size="small" v-model="keyword.classify" clearable placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="principal">
        <el-input size="small" v-model="keyword.orderName" clearable placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="品牌" prop="phone">
        <el-input size="small" v-model="keyword.brand"  clearable placeholder="请输入品牌"></el-input>
      </el-form-item>
      <el-form-item label="规格型号" prop="phone">
        <el-input size="small" v-model="keyword.spe"  clearable placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item class="delete">
        <el-button type="primary" @click="search" size="small" icon="el-icon-search" >查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--    中间表格-->
  <el-table v-loading="loading" :data="measureList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="分类" align="center" prop="classify" />
    <el-table-column label="名称" align="center" prop="orderName" />
    <el-table-column label="品牌" align="center" prop="brand" />
    <el-table-column label="规格型号" align="center" prop="spe" />
    <el-table-column label="单位" align="center" prop="unit" />
    <el-table-column label="采购数量" align="center" prop="quantity" />
    <el-table-column label="已到货数量" align="center" prop="aquantity" />
    <el-table-column label="库存数量" align="center" prop="inventoryNum" />
    <el-table-column label="计划使用项目" align="center" prop="userItem" />
    <el-table-column label="所在仓库" align="center" prop="ware" />
    <el-table-column label="货物图片" align="center" prop="cargoPic" >
      <template slot-scope="scope">
        <img :src="scope.row.cargoPic" width="80px" height="80px">
      </template>
    </el-table-column>
    
    
    <el-table-column label="状态" align="center" prop="arrivalStatus" >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.arrivalStatus=='1'?'blue':scope.row.arrivalStatus=='2'?'danger':scope.row.arrivalStatus=='3'?'warning':'info'"
        >{{scope.row.arrivalStatus=='1'?'全部到货':scope.row.arrivalStatus=='2'?'未到货':scope.row.arrivalStatus=='3'?'部分到货':'未知'}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <!--    下方分页-->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>
<script>

import {KfindAll} from "@/api/kucun";
export default {
  name:'KuCun',
  data(){
    return{
      currentPage:1,
      total:0,
      loading:false,
      measureList:[],
      pageNum:1,
      pageSize:5,
      keyword:{
        classify:null,
        orderName:null,
        brand:null,
        spe:null
      },
      Pics:"",
        url: "https://xiaoze-taitai.oss-cn-beijing.aliyuncs.com/"
    }
  },
  methods:{
    fetchData(){//获取数据
      let params ={
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        classify:this.keyword.classify,
          orderName:this.keyword.orderName,
        brand:this.keyword.brand,
        spe:this.keyword.spe,
      }
      KfindAll(params).then(res =>{
        this.loading = false
        this.measureList=res.data.list
        this.total = res.data.total//给分页的总条数赋值
       
        
      })
    },
    // 分页控制
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    handleSelectionChange(selection){
      this.ids = [];
      // console.log(selection) 每次勾选 都会查到当前行的所有数据
      for (let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].id)
      }
    },
    //点击开始搜索
    search(){
this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>


<style scoped>

</style>
